<template>
	<view>
		<z-paging :show-refresher-when-reload="true"  show-refresher-update-time  ref="paging" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view slot="top" class="">
				<!-- <u-navbar :borderBottom="false" back-text=" " :title="title"></u-navbar> -->
				<!-- <u-navbar :is-back="true" back-text=" " :title-color="style.color5" :background="{background:style.color2}" :title-size="30" :title-width="400" :title="title"></u-navbar> -->
				<view class="search_box">
					<view @click="back" class="search_box_left">
						<u-icon name="arrow-left" color="#000" size="40"></u-icon>
					</view>
					<view class="search_box_right">
						<view @click="search_submit" class="search_input_icon">
							<u-icon name="search" color="#000" size="28"></u-icon>
						</view>
						<input class="search_input" @confirm="search_submit"  v-model="search" type="text" placeholder-class="search" placeholder="请输入您要搜索的商品" />
					</view>
				</view>
				<view v-if="search_list_old.length>0" class="search_list_old">
					<view class="">
						<view class="search_list_old_left" v-if="search_list_old.length>0" >
							<view @click="search_quick(item)" v-for="(item,index) in search_list_old" :key="index" class="search_itrem uni-ellipsis">
								{{item}}
							</view>
						</view>
						<view v-else class="search_no" >
							暂无搜索记录
						</view>
						
					</view>
					<u-icon  name="trash" @click="del_item" color="red" size="28"></u-icon>
				</view>
				<view  style="border-bottom: 1rpx solid #f2f2f2;padding-bottom: 10rpx; background-color: #fff;" class="bar_box_item">
					<view class="tabs_box">
						<!-- <u-tabs  :list="tabsList" active-color='#e2363a' :is-scroll="false" :current="current" @change="tabChange"></u-tabs> -->
						<view v-for="(item,index) in tabsList" :ke="index" :class="current==index?'bar_choose':''" class="tabs_box_item" @click="tabChange(index)">
							{{item.name}}
						</view>
					</view>
					<image @click="choseListType(list_type)" style="width: 36rpx;" src="../../static/icon/icon_3.png" mode="widthFix"></image>
				</view>
				
			</view>
			<view class="list">
				<view v-if="list_type==1" class="">
					<view @click="navTo('/pages/shop_info/shop_info?id='+item.id)" v-for="(item , index) in dataList" :key="index" class="list_item">
						<view class="" style="width: 194rpx; overflow: hidden; height: 194rpx;border-radius: 16rpx; overflow: hidden;" v-if="item.template_id>0" >
							<kuang :item="toItem(item)" :src="src_pic(item.pic)"></kuang>
						</view>
						<u-image v-else width="194rpx" border-radius="20" height="194rpx" :src="src_pic(item.pic)"></u-image>
						<view class="list_item_right">
							<view class="">
								<view class="goods_title uni-ellipsis-2">
									{{item.name}}
								</view>
								<view class="goods_title3">
									专柜订货，包邮包税到手价
								</view>
							</view>
							
							<view class="list_item_right_bottom">
								<view class="price_bottom2">
									<view class="price_bottom_left">
										<view class="pric_bgc_2">
											<span class="pic_yuan">RMB</span>
											<span>{{item.price}}</span>
										</view>
									</view>
									<!-- <view class="price_bottom_right2">
										<span class="CHN_price_2">约{{item.rmb_price}}人民币</span>
									</view> -->
								</view>
								<image class="" style="width: 44rpx;" src="../../static/icon/cart_icon.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view v-if="list_type==2" class="list_2">
					<view  class="list_box_item" @click="navTo('/pages/shop_info/shop_info?id='+item.id)" v-for="(item , index) in dataList" :key="index" >
						<view class="" style="width: 292rpx; height: 292rpx; border-radius: 16rpx; overflow: hidden;display: flex; align-items: center;" v-if="item.template_id>0" >
							<kuang :item="toItem(item)" :src="src_pic(item.pic)"></kuang>
						</view>
						<u-image v-else width="292rpx" border-radius="20" height="292rpx" :src="src_pic(item.pic)"></u-image>
						<view class="goods_title2 uni-ellipsis-2">
							{{item.name}}
						</view>
						<view class="price_bototm_box">
							<view class="price_bottom">
								<view class="price_bottom_left">
									<view class="pric_bgc_2">
										<span class="pic_yuan">RMB</span>
										<span>{{item.price}}</span>
									</view>
								</view>
								<!-- <view class="price_bottom_right">
									<span class="CHN_price_2">约{{item.rmb_price}}人民币</span>
								</view> -->
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</z-paging>
		<u-popup mode="bottom"  border-radius="20" v-model="classificationShow">
			<view class="pop_box">
				<view class="pop_box_left">
					<view @click="chooseItem(index)" v-for="(item , index) in classification"  :class="item.isChoose?'choose':''" class="pop_box_left_item ">
						{{item.name}}
					</view>
				</view>
				<view   class="pop_box_right">
					<view @click="choose_right(item)" v-for="(item , index) in class_right" :key="index" class="pop_box_right_item">
						{{item.name}}
					</view>
				</view>
			</view>
		</u-popup>
		<kefu class="" ></kefu>
	</view>
</template>

<script>
	import search from '@/componts/index_comp/search.vue';
	import kefu from '@/componts/kefu/kefu.vue';
	import kuang from '@/componts/index_comp/kuang_list.vue';
	export default {
		components:{
			search,
			kefu,
			kuang
		},
		data() {
			return {
				style:{},
				title:'商品列表',
				classificationShow:false,//分类列表弹				goods_group_id:null,//分组id
				class_right:[],
				classification:[],//分类列表

				dataList:[],
				tabsList:[
					{name: '综合'},
					{name: '价格'},
					{name: '销量'},
					{name: '时间'},
				],
				search_list_old:[],
				current:0,
				search:'',
				list_type:1,
				
			}
		},
		onLoad(data) {
			if(data.id){
				this.id = data.id
				this.title = data.title
			}
			if(data.goods_group_id){
				this.goods_group_id = data.goods_group_id
				this.title = data.title
			}
			this.search_list_old = uni.getStorageSync('old_search_list')? JSON.parse(uni.getStorageSync('old_search_list')):[];
			if(data.search){
				this.search = data.search
				
			}
			
		},
		onShow() {
			if(this.$refs.paging){
				this.$refs.paging.reload()	
			}
			var style =  uni.getStorageSync('style')
						style = JSON.parse(style)
						this.style = style
		},
		
		
		methods: {
			back(){
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1,
						success: () => console.log('返回成功'),
						fail: err => console.error('返回失败:', err)
					});
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
			choseListType(type){
				if(type ==1){
					this.list_type=2
				}
				if(type ==2){
					this.list_type=1
				}
				console.log(this.list_type)
			},
			toItem(item){
				var cc = JSON.parse(JSON.stringify(item))
				if (cc.template_id) {
					cc.template_style.content = JSON.parse(cc.template_style.content)
				} else {
					cc.template = {
						baoZhuang: "",
						shop_name: "",
						sku: "",
						title: "",
						title2: "",
						title3: "",
						type: "",
					}
					
				}
				return cc
			},
			src_pic(src){
				var pic_list = src.split(',')
				return pic_list[0]
			},
			del_item(){
				uni.showModal({
					title:'提示',
					content:'确认清空历史记录',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "清空", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
					if(res.confirm) {  
						this.search_list_old = []
						uni.setStorageSync('old_search_list' , JSON.stringify(this.search_list_old))
					} else {
						
					}  
					} 
				})
			},
			choose_right(row){
				this.id = row.id
				this.title = row.name
				this.$refs.paging.reload()	
				this.classificationShow = false
			},
			search_submit(){
				this.queryList()
			},
			search_quick(e){
				this.search = e
				this.queryList()
			},
			open_pop(){
				this.getClassTree()
			},
			getClassTree(){
				this.$gugoApi.Index_cate_list({}).then(res=>{
					res.data.forEach((item,index)=>{
						res.data[index].isChoose = false
					})
					this.classification = res.data
					this.chooseItem(0)
					this.classificationShow = true
				}).catch(err=>{
					uni.showToast({
						title:"数据获取失败",
						icon:'none'
					})
				})
			},
			chooseItem(index){
				this.classification.forEach((item,ind)=>{
					if(ind == index){
						this.classification[ind].isChoose = true
						this.class_right = this.classification[ind].sub
						// this.classification[index].pic = this.classification[index].pic.replace(/\\/g , '/')
						this.class_right.forEach((ite,key)=>{
							this.class_right[key].pic = this.class_right[key].pic.replace(/\\/g , '/')
						})
					}else{
						this.classification[ind].isChoose = false
					}
				})
			},
			queryList(pageNo, pageSize) {
				var data = {
					page:pageNo,
					limit:pageSize,
					"name": this.search,
					"cid": this.id ,//分类id
					goods_group_id:this.goods_group_id,//分组id
					order_by_type:this.current
				}
				if(data.name){
					var arr = uni.getStorageSync('old_search_list')? JSON.parse(uni.getStorageSync('old_search_list')):[];
					arr.push(data.name)
					// console.log(arr , '-----')
					if(arr.length>5){
						arr.shift()
					}
					 var newArr = [...new Set(arr)]; //利用了Set结构不能接收重复数据的特点
					uni.setStorageSync('old_search_list' , JSON.stringify(newArr))
					this.search_list_old = newArr
				}
				this.$wqzApi.index_goods_list(data).then(res=>{
					this.$refs.paging.complete(res.data.list);
				}).catch(err=>{
					this.$refs.paging.complete(false);
				})
			
				
			},
			tabChange(e){
				this.current = e
				this.$refs.paging.reload()
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./goodList.scss);
</style>
